<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="我是店主"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div class="shopKeeper-info-box">
                <img
                    class="shopKeeper-img"
                    :src="currentUserInfo.face"
                />
                <div class="shopKeeper-name">{{decodeURI(currentUserInfo.nick_name)}}</div>
                <div class="shopKeeper-id">ID：{{currentUserInfo.id}}</div>
            </div>

            <div class="shopKeeper-func-box">
                <div
                    class="func-item"
                    @click="goJoin"
                >
                    <img
                        class="func-item-icon"
                        src="@/assets/images/userCenter/shop-icon1.png"
                    />
                    <div class="func-item-name">
                        <div class="name-en">Service Provider</div>
                        <div class="name-cn">升级服务商</div>
                    </div>
                </div>
                <div
                    class="func-item"
                    @click="goTeam"
                >
                    <img
                        class="func-item-icon"
                        src="@/assets/images/userCenter/shop-icon4.png"
                    />
                    <div class="func-item-name">
                        <div class="name-en">Data</div>
                        <div class="name-cn">数据管理</div>
                    </div>
                </div>
                <div
                    class="func-item"
                    @click="goMaterial"
                >
                    <img
                        class="func-item-icon"
                        src="@/assets/images/userCenter/shop-icon5.png"
                    />
                    <div class="func-item-name">
                        <div class="name-en">Material</div>
                        <div class="name-cn">素材管理</div>
                    </div>
                </div>
                <div
                    class="func-item"
                    @click="goAttorney"
                >
                    <img
                        class="func-item-icon"
                        src="@/assets/images/userCenter/shop-icon3.png"
                    />
                    <div class="func-item-name">
                        <div class="name-en">Power of attorney</div>
                        <div class="name-cn">我的授权中心</div>
                    </div>
                </div>
                <div
                    class="func-item"
                    @click="goMyAttorney"
                >
                    <img
                        class="func-item-icon"
                        src="@/assets/images/userCenter/shop-icon3.png"
                    />
                    <div class="func-item-name">
                        <div class="name-en">Power of center</div>
                        <div class="name-cn">权益申购中心</div>
                    </div>
                </div>
                <div
                    class="func-item"
                    @click="goSchool"
                >
                    <img
                        class="func-item-icon"
                        src="@/assets/images/userCenter/shop-icon2.png"
                    />
                    <div class="func-item-name">
                        <div class="name-en">Business school</div>
                        <div class="name-cn">百领商学院</div>
                    </div>
                </div>
                <!-- <div
                    class="func-item"
                    @click="goReturnDeposit"
                    v-if="currentUserInfo.deposit>0"
                >
                    <img
                        class="func-item-icon"
                        src="@/assets/images/userCenter/shop-icon2.png"
                    />
                    <div class="func-item-name">
                        <div class="name-en">Refund of deposit</div>
                        <div class="name-cn">申请退押金</div>
                    </div>
                </div> -->
                <div
                    class="func-item"
                    @click="goInfo"
                >
                    <img
                        class="func-item-icon"
                        src="@/assets/images/userCenter/shop-icon2.png"
                    />
                    <div class="func-item-name">
                        <div class="name-en">ShopKeeper info</div>
                        <div class="name-cn">我的联系方式</div>
                    </div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'ShopKeeper',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            userInfo: ''
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        },
        goJoin() {
            this.$router.push('/joinUs/typeSelect')
        },
        goTeam() {
            this.$router.push('/team')
        },
        goMaterial() {
            this.$router.push('/imgManager')
        },
        goAttorney() {
            this.$router.push('/attorneyList')
        },
        goMyAttorney() {
            this.$router.push('/agentTimes')
        },
        goSchool() {
            this.commonDialog.alert('提示', '即将开放，敬请期待！')
        },
        goReturnDeposit() {
            this.commonDialog.alert('提示', '即将开放，敬请期待！')
        },
        goInfo() {
            this.$router.push('/agentInfo')
        }
    },
    computed: {
        ...mapState(['currentUserInfo'])
    }
}
</script>

<style lang="stylus" scoped>
.shopKeeper-info-box
    text-align center
    padding 0.5rem 0
    background #fff
    .shopKeeper-img
        display block
        width 2.29rem
        height 2.29rem
        border-radius 100%
        margin 0 auto
    .shopKeeper-name
        margin-top 0.3rem
        font-size 0.38rem
        color #333
    .shopKeeper-id
        margin-top 0.18rem
        font-size 0.33rem
        color #666
.shopKeeper-func-box
    display flex
    flex-wrap wrap
    padding 0 0.18rem
    margin-top 0.18rem
    background #fff
    .func-item
        display flex
        align-items center
        width 50%
        height 2.25rem
        padding-left 0.55rem
        border-right 1px solid #e5e5e5
        border-bottom 1px solid #e5e5e5
        box-sizing border-box
        .func-item-icon
            width 0.5rem
            height 0.5rem
        .func-item-name
            margin-left 0.27rem
            .name-en
                font-size 0.27rem
                color #666
            .name-cn
                font-size 0.33rem
                color #666
                margin-top 0.18rem
    .func-item:nth-child(2n)
        border-right none
</style>


